import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image, Text } from '@tarojs/components'
import { AtIcon, AtTabs, AtTabsPane } from 'taro-ui'
import './detail.scss'
import '../../icon.scss';
import { goodsDetail, cart } from '../utils/api'
import { Youhui } from './plug/youhui';
import { Service } from './plug/service';
import { Sku } from './plug/sku';
import { Param } from './plug/param';
import { Store } from './plug/store';
let clickCart = true;

export default class Detail extends Component {
  state = {
    current:0,
    isFringe : 0,

    id: 0,
    stores_id: 0,
    classify_id:0,
    name: "",
    thumbnail:"",
    selling_price:0,
    purchase_price:0,
    original_price:0,
    sales_volume:0,
    stock:0,
    create_time:'',
    class_name:'',
    class_icon:'',
    detail:'',
    slogan: "",
    buy_num:0,
    images:[],
  }
  constructor(){
    super();
  }

  componentWillMount () { 
    let that = this;
    Taro.getSystemInfo({
      success: res => {
        console.log(res);
        if(res.model === 'iPhone X'){
          that.setState({
            mbotton:'120px'
          });
        }
        if(res.statusBarHeight === 44){
          that.setState({
            isFringe:1
          });
        }
      }
    });
  }

  async componentDidMount () { 
    // let goodsId = this.$router.params.id;
    let goodsId = 1;
    let goods = await goodsDetail(goodsId);
    this.setState({
      ...goods
    });
  }

  componentWillUnmount () { }

  onShareAppMessage(){
      return {
        title:this.state.name,
        path: '/pages/goods/detail?id='+ this.state.id,
        success:function(res){
          console.log(res);
        }
      }
  }

  handleChangeTab(value){
    this.setState({
      current:value
    });
  }

  handleGoBack(){
    Taro.navigateBack();
  }

  handleRedirectIndex(){
    Taro.navigateTo({
      url:'/pages/index/index'
    });
  }

  render () {
    const tabList = [{ title: '商品详情' }, { title: '商品评价' }]
    return (
      <View className='detail-box'>
        {
          this.state.isFringe
          ?
          <View className='chevron-left detail-fringe' onClick={this.handleGoBack}>
            <View className='bg-c'>
              <AtIcon value='chevron-left' size='28' color='#fff'></AtIcon>
            </View>
          </View>
          :
          <View className='chevron-left detail-no-fringe' onClick={this.handleGoBack}>
            <View className='bg-c'>
              <AtIcon value='chevron-left' size='28' color='#fff'></AtIcon>
            </View>
          </View>
        }
        
        <Swiper
            className='detail-swiper'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            circular
            indicatorDots
            autoplay>
            {
              this.state.images.map(function(item){
                return <SwiperItem>
                  <Image className='detail-swiper-image' src={item.image} mode='widthFix' />
                </SwiperItem>
              })
            }
          </Swiper>
          {/* 预约 */}
          {/* <View className='detail-active'>
              <View className='detail-active-time'>
                <View>距离活动结束</View>
                <View className='detail-active-time-value'>
                  <View>1</View>天
                  <View>15</View>时
                  <View>15</View>分
                  <View>15</View>秒
                </View>
              </View>
          </View> */}

          <View className='detail-info'>
            <View className='detail-info-sale'>
              <View className='detail-price'>
                <View className='detail-info-sale-price'>
                  <Text>￥</Text>
                  <Text className='detail-info-sale-price-value'>{this.state.selling_price}</Text>
                </View>
                <View className='detail-price-tag'>夏不为利</View>
              </View>
              <View className='detail-info-sale-old-price'>
                <Text>价格</Text>
                <View className='detail-info-sale-old-price-value'>￥{this.state.original_price}</View>
              </View>
            </View>
            <View className='detail-info-name'>
              <Text className='name'>{this.state.name}</Text>
              <View className='detail-info-share'>
                <AtIcon value='share' size='16' color='#717171'></AtIcon>
                <Text>分享</Text>
              </View>
            </View>
            <View className='detail-info-other'>
              <View>快递: 0.0</View>
              <View>月销416</View>
              <View>浙江绍兴</View>
            </View>
          </View>
          <View className='divider'></View>
          {/* 优惠 */}
          <Youhui />
          {/* 服务 */}
          <Service />
          <View className='divider'></View>
          {/* 规格 */}
          <Sku />
          {/* 参数 */}
          <Param />
          <View className='divider'></View>
          {/* 店铺 */}
          <Store />
          <View className='divider'></View>
          <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleChangeTab.bind(this)}>
            <AtTabsPane current={this.state.current} index={0} >
              <View className='illustrate'>
                <div dangerouslySetInnerHTML={{__html:this.state.detail}}></div>
                {/* {
                  this.state.illustrate.map(function(item){
                    return <Image className='detail-swiper-image' src={item} mode='widthFix' />
                  })
                } */}
              </View>
              <View className='detail-bottom-empty'></View>
            </AtTabsPane>
            <AtTabsPane current={this.state.current} index={1}>
              <View></View>
            </AtTabsPane>
          </AtTabs>

          <View className='detail-bottom'>
            <View className='detail-bottom-item' onClick={this.handleRedirectIndex}>
              <AtIcon prefixClass='icon' value='dianpu' size='16' color='#7C7C7C'></AtIcon>
              <View>首页</View>
            </View>
            <View className='detail-bottom-item'>
              <AtIcon prefixClass='icon' value='ziyuan' size='16' color='#7C7C7C'></AtIcon>
              <View>客服</View>
            </View>
            <View className='bf00'>
              <View className='detail-bottom-item' style={{background:'#FF9500'}} onClick={this.handleAddCart}>
                <Text>加入购物车</Text>
              </View>
              <View className='detail-bottom-item' style={{background:'#f00'}} onClick={this.handleBuyNow}>立即购买</View>
            </View>
          </View>
      </View>
    )
  }
}